<template slot-scope="scope">
  <div>
    <el-row>
      <el-col :span="8" :offset="16" style="text-align: right">
        <el-dropdown>
          <el-avatar :size="50" :src="$store.state.userStore.userInfo.avatar">
          </el-avatar>
          <el-dropdown-menu slot="dropdown">
            1
            <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row class="mt-10">  <!-- 修改：统一使用间距类名 -->
      <el-col :span="24">
        <el-card shadow="hover">  <!-- 新增：添加卡片悬停效果 -->
          <div slot="header" class="clearfix">
            <span style="line-height: 36px;">图书信息管理列表</span>
          </div>
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="图书名称">
              <el-input
                v-model="searchForm.b_name"
                placeholder="请输入内容"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doSearch()" size="medium">搜索</el-button>
              <el-button type="success" @click="handleAdd()" size="medium">新增</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 表格和分页部分 -->
    <el-row class="mt-10">
      <el-col :span="24">
        <el-card>
          <el-table
            :data="pageData.list"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              prop="b_id"
              label="编号"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="b_name"
              label="图书名称"
              width="200"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="b_author"
              label="图书作者"
              width="280"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="b_time" label="创建时间"></el-table-column>
            <el-table-column label="图书类型">
              <template slot-scope="scope">
                <span v-if="scope.row.b_type === 1">计算机/软件</span>
                <span v-if="scope.row.b_type === 2">小说/文摘</span>
                <span v-if="scope.row.b_type === 3">杂项</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleEdit(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="mt-10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.pageNo"
            :page-sizes="[2, 5, 10, 15, 20]"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.totalCount"
          >
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :title="(saveForm.b_id == '' ? '新增' : '修改') + '图书信息'"
      :visible.sync="saveDialogVisible"
    >
      <!-- 表单数据绑定到 saveForm 对象 -->
      <el-form :model="saveForm" :rules="rules" ref="saveForm">
        <!-- 分类 ID 不显示，修改才需要分类 ID -->
        <el-form-item label="图书ID" label-width="120px" v-show="false">
          <!-- ID 设置为隐藏域 -->
          <el-input
            type="hidden"
            v-model="saveForm.b_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="图书名称" label-width="120px" prop="b_name">
          <el-input v-model="saveForm.b_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图书作者" label-width="120px" prop="b_author">
          <el-input v-model="saveForm.b_author" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图书创建时间" label-width="120px" prop="b_time">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="saveForm.b_time"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="图书类型" label-width="120px" prop="b_type">
          <el-select v-model="saveForm.b_type" placeholder="请选择">
            <el-option label="计算机/软件" :value="1"></el-option>
            <el-option label="小说/文摘" :value="2"></el-option>
            <el-option label="杂项" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSave('saveForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs";
export default {
  data() {
    return {
      rules: {
        b_name: [
          { required: true, message: "请输入图书名称", trigger: "blur" },
        ],
        b_author: [
          { required: true, message: "请输入作者名称", trigger: "blur" },
        ],
        b_time: [
          { required: true, message: "请输入图书创建时间", trigger: "blur" },
        ],
        b_type: [
          { required: true, message: "请输入图书类型", trigger: "blur" },
        ],
      },
      searchForm: {
        b_name: "",
        pageSize: 2,
        pageNo: 1,
      },
      pageData: {
        list: [],
        //当前页码
        pageNo: 1,
        //当页显示数据
        pageSize: 2,
        totalCount: 0,
        totalPageCount: 1,
      },
      //保存新增对话框的显示状态
      saveDialogVisible: false,
      saveForm: {
        b_id: "",
        b_name: "",
        b_author: "",
        b_time: "",
        b_type: "",
      },
    };
  },
  mounted() {
    this.doSearch();
  },
  methods: {
    logout() {
      this.$store.commit("logout");
      this.$message.success("注销成功");
      this.$router.push({ path: "/" });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("/book/delete?b_id=" + row.b_id).then((response) => {
            this.$message.success("删除成功");
            this.doSearch();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleEdit(index, row) {
      this.saveDialogVisible = true;
      this.$axios.post("/book/view?b_id=" + row.b_id).then((response) => {
        this.saveForm = response.data;
        this.saveDialogVisible = true;
      });
    },
    doSave(saveForm) {
      let queryStr = qs.parse(qs.stringify(this.saveForm));
      if (this.saveForm.b_id == "" || this.saveForm.b_id == null) {
        this.$axios.post("/book/formAdd", queryStr).then((response) => {
          this.saveDialogVisible = false;
          this.$message.success("添加成功");
          this.doSearch();
        });
      } else {
        this.$axios.post("/book/formUpdate", queryStr).then((response) => {
          this.saveDialogVisible = false;
          this.$message.success("修改成功");
          this.doSearch();
        });
      }
    },
    handleAdd() {
      this.saveForm = {
        b_id: "",
        b_name: "",
        b_author: "",
        b_time: "",
        b_type: "",
      };
      this.saveDialogVisible = true;
    },
    doSearch() {
      let bodyData = qs.stringify(this.searchForm);
      this.$axios.post("/book/page",bodyData).then((response) => {
        this.pageData = response.data;
      });
    },

    handleSelectionChange() {
      console.log(val);
    },
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.doSearch();
    },
    handleCurrentChange(pageNo) {
      this.searchForm.pageNo = pageNo;
      this.doSearch();
    },
  },
};
</script>
<style scoped>
/* 整体布局优化 */
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 头部用户信息区域 */
.user-info {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.user-avatar {
  cursor: pointer;
}

/* 卡片样式优化 */
.el-card {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.el-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* 表格样式优化 */
.el-table {
  margin-top: 0;
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 500;
}

.el-table tr:hover {
  background-color: #f0f2f5;
}

/* 按钮样式优化 */
.el-button {
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-button + .el-button {
  margin-left: 15px;
}

/* 分页样式优化 */
.el-pagination {
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

/* 对话框样式优化 */
.el-dialog {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.el-dialog__header {
  background-color: #f5f7fa;
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.el-dialog__footer {
  border-top: 1px solid #e4e7ed;
}

/* 表单样式优化 */
.el-form-item {
  margin-bottom: 22px;
}

.el-form-item__label {
  font-weight: 500;
  color: #333;
}

/* 高级色彩搭配 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f0f2f5;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}

:deep(.el-button--primary) {
  background-color: #409EFF;
  border-color: #409EFF;
}

:deep(.el-button--primary:hover) {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

:deep(.el-button--success) {
  background-color: #67c23a;
  border-color: #67c23a;
}

:deep(.el-button--danger) {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

/* 字体优化 */
body {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 15px;
  }

  .el-form-item {
    margin-bottom: 18px;
  }

  .el-button {
    padding: 7px 15px;
  }
}
</style>
